<template>


    <div>
        <div>
            <label class="font">
                <el-button type="text" icon="el-icon-back" @click="handleBack()" class="fontBack"
                    style="color: black;">返回</el-button>
            </label>
            <label style="margin: 5px;">
                |
            </label>
            <label class="font">
                管理歌曲
            </label>
        </div>
        <div class="container">
            <div class="tableBar">
                <label style="margin-right: 5px;">
                    歌曲名称：
                </label>
                <el-input v-model="name" placeholder="请输入歌曲名称" style="width: 15%"></el-input>
                <label style="margin-left: 5px;">
                    专辑名称：
                </label>
                <el-input v-model="album" placeholder="请输入专辑名称" style="width: 15% ; margin-left: 5px;"></el-input>
                <el-button type="primary" style="margin-left: 5px;" @click="handlePageSelect()">查询</el-button>
                <el-button type="primary" style="float: right" @click="addSong()">+添加歌曲</el-button>
            </div>

            <template>
                <el-table :data="recodes" stripe style="width: 100%">

                    <el-table-column label="歌曲图片">
                        <template slot-scope="scope">
                            <el-image style="width: 80px; height: 80px; border: none;" :src=scope.row.image></el-image>
                        </template>
                    </el-table-column>

                    <el-table-column prop="open" label="播放" width="180">
                        <template slot-scope="scope">
                            <div v-if="toggle == scope.row.name">
                                <el-button type="text" @click="close()">停止</el-button>
                            </div>

                            <div v-if="toggle != scope.row.name">
                                <el-button type="text" @click="open(scope.row.name, scope.row.url)">播放</el-button>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" label="歌曲名称" width="180">
                    </el-table-column>

                    <el-table-column prop="album" label="专辑" width="180">
                    </el-table-column>

                    <el-table-column prop="lyric" label="歌词" :show-overflow-tooltip="true" align="center" width="500">
                        <template slot-scope="scope">
                            {{ scope.row.lyric }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="operate" label="操作" width="180">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleUpdate(scope.row.id)">修改</el-button>
                            <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total" class="pageList">
            </el-pagination>

        </div>
    </div>
</template>

<script>

import { mapGetters } from 'vuex'
import { PageQuery, DeleteSinger } from '@/api/song'

export default {
    inject: ['reload'],
    computed: {
        ...mapGetters([
            'isPlay',
            'over'
        ])
    },
    data() {
        return {
            SingerId: -1,
            album: '',
            name: '',
            total: 0,
            page: 1,
            pageSize: 5,
            recodes: [],
            toggle: false
        }
    },
    methods: {

        handlePageSelect() {
            const data = { "singerId": this.$route.query.id, "album": this.album, "name": this.name, "page": this.page, "pageSize": this.pageSize }
            PageQuery(data).then((res) => {
                if (res.data.code === 1) {
                    this.recodes = res.data.data.recodes
                    this.total = res.data.data.total
                }
            }).catch((error) => {
                this.$message.error('请求出错了')
            })
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.handlePageSelect()
        },
        handleCurrentChange(page) {
            this.page = page
            this.handlePageSelect()
        },
        handleBack() {
            this.$router.push('/Singer')
        },
        addSong() {
            this.$router.push({
                path: '/addSong',
                query: {
                    singerId: this.SingerId,
                    type: 'Add'
                }
            })
        },
        handleUpdate(id) {
            this.$router.push({
                path: '/addSong',
                query: {
                    singerId: this.SingerId,
                    id: id,
                    type: 'Update'
                }
            })
        },
        handleDelete(id) {
            this.$confirm('此操作将永久删除该歌曲, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                DeleteSinger(id).then((res) => {
                    if (res.data.code === 1) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.handlePageSelect()
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        open(name, url) {
            this.toggle = name;
            this.$store.commit('setUrl', url)
            this.$store.commit('setIsPlay', true)
        },
        close() {
            this.toggle = false;
            this.$store.commit('setIsPlay', false)
        }
    },
    created() {
        this.$store.commit('setIsPlay', false)
        this.$store.commit('setUrl', 'http://localhost:8888/Song/main.mp3')
        this.handlePageSelect();
        this.SingerId = this.$route.query.id
    },
    destroyed() {
        this.$store.commit('setIsPlay', false)
    }

}
</script>

<style>
.container {
    margin-top: 10px;
    z-index: 1;
    background: #fff;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.el-tooltip__popper {
    font-size: 14px;
    max-width: 40%
}

.img {
    display: block;
    width: 100px;
    height: 100px;
}

/* .pageList{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
} */

.pageList {
    margin-left: 24%;
    margin-top: 3%;
}

.font {
    font-size: 15px;
    font-weight: bolder;
}

.fontBack {
    font-size: 15px;
    font-weight: bolder;
}

.pageList {
    margin-left: 24%;
    margin-top: 3%;
}
</style>